<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
        .provinces {
          background-color: #fff;
          border: 1px solid #ccc;
        }
        .hk {
            position:relative;
            left:-750px;
            top:0px;
        }
        
        /*
        .background {
          fill: none;
          pointer-events: all;
        }

        .province {
          fill: #cde;
          stroke: #fff;
            stroke-linejoin: round;
          stroke-linecap: round;
        }
        */
        
        /*#provinces .active, #states .active {
          fill: #89a;
        }
        #cities {
          stroke-width: 0;
        }
        .city {
          fill: #345;
          stroke: #fff;
        }
        pre.prettyprint {
          border: 1px solid #ccc;
          margin-bottom: 0;
          padding: 9.5px;
        }*/
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//d3js.org/queue.v1.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script>
        
        // MAP setup
        var width = 800,
            height = 550;

        // data goes here
        TO_BE_CHANGED

    </script>
    <script src="d3map.js"></script>

  </body>
</html>